<template>
  <div>
    <van-nav-bar
      class="app-nav-bar"
      title="预约订单确认"
      left-arrow
      @click-left="$router.back()"
    />
    <van-form @submit="onSubmit">
      <van-cell-group>
        <van-cell title="就诊人" :value="patient.name" is-link @click="showPicker=true,showPatientList()" />
        <van-cell title="就诊卡号" :value="patient.cardNo" is-link />
      </van-cell-group>
      <van-cell-group class="hospInfo-container">
        <van-cell>
          就诊医院：中心医院
        </van-cell>
        <van-cell>
          就诊科室：{{depname}}
        </van-cell>
        <van-cell>
          就诊医生：{{docName}}
        </van-cell>
        <van-cell>
          门诊类型：{{serviceType}}号
        </van-cell>
        <van-cell>
          候诊时间：{{waitDate}} {{waitTime}}
        </van-cell>
      </van-cell-group>

      <van-cell-group class="order-intro-container">
        <van-cell>
          预约说明：
          <br>
          1、在线支付暂时不支持医保支付。
          <br>
          2、具体金额请以实际订单为准。
        </van-cell>

      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
      <van-popup v-model="showPicker">
        <van-picker
          show-toolbar
          :columns="patientList"
          value-key="name"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
    </van-form>
  </div>
</template>

<script>

import {mapState} from "vuex";
import patientApi from '@/api/patient'
import orderApi from "@/api/orderInfo";

export default {
  name:'SubmitOrderIndex',
  data(){
    return{
      value:'',
      columns:[],
      showPicker:false,
      patient:{},
      waitTime:'',
      waitDate:'',
      serviceType:'',
      depname:'',
      docName:'',
      patientList:[],
      scheId:'',
      orderInfo:{}
    }
  },
  created() {
    this.init()
  },
  computed:{
    ...mapState(['user'])
  },
  mounted() {
    this.docName = this.$route.params.docName
    this.serviceType = this.$route.params.serviceType
    this.waitDate = this.$route.params.waitDate
    this.waitTime = this.$route.params.waitTime
    this.depname = this.$route.params.depname
    this.scheId = this.$route.params.scheId
  },
  methods:{
    init(){
      //获取就诊卡信息
      this.getPatientInfo(this.user.userId)
    },
    async getPatientInfo(id) {
      const{data:res} = await patientApi.findFirst(id)
      if (res.code!==200){
        return this.$notify({type:'danger',message:'查询失败'})
      }
      this.patient = res.data
    },
    async onSubmit(){
      this.orderInfo = {scheduleId:this.scheId,cardNo:this.patient.cardNo}
      const {data:res} = await orderApi.add(this.orderInfo)
      if (res.code!==200){
        return this.$notify({type:'danger',message:'预约失败，重复预约'})
      }
      await this.$router.push({path: '/order/detail', query: {orderInfoId: res.data}})
    },
    onConfirm(value, index) {
      this.patient = this.patientList[index]
      this.showPicker = false
    },
    async showPatientList(){
      const{data:res} = await patientApi.findByUserId(this.user.userId)
      if (res.code!==200){
        return this.$notify({type:'danger',message:'查询失败'})
      }
      this.patientList = res.data
    }
  }
}

</script>

<style scoped lang="less">
.hospInfo-container,order-intro-container{
  margin-top: 12px;
}
</style>
